<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('sidebar.system')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('staffManage.crumbsThree')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- -------------搜索查询栏------------------------ -->
    <search 
      :searchData="searchData" 
      @search="search" 
      :searchRight="true"
    ></search>

    <div class="list_operation" v-if="$store.state.common.permiss.creditauditgroup.includes('add')">
      <el-button type="primary" @click="addGroup">{{$t('new.no25')}}</el-button>
    </div>

    <!-- -------------表单显示栏------------------------ -->
    <div class="table" >
      <template>
        <el-table :data="tableData" stripe size="small">
          <el-table-column align="center" prop="groupId" :label="$t('new.no24')">
          </el-table-column>
          <el-table-column align="center" prop="groupName" :label="$t('new.no18')">
          </el-table-column>
          <el-table-column align="center" prop="leaderName" :label="$t('new.no19')">
          </el-table-column>
          <el-table-column align="center" prop="memberCount" :label="$t('staffManage.xinshenyuan')">
          </el-table-column>
          <el-table-column align="center" prop="createTime" :label="$t('new.no28')" width="86">
          </el-table-column>
          <el-table-column align="center" prop="updateTime" :label="$t('add.no95')" width="86">
          </el-table-column>
          <el-table-column fixed="right" align="center" prop="operation" :label="$t('public.operation')" min-width="120">
            <template slot-scope="scope">
              <span
                v-if="$store.state.common.permiss.creditauditgroup.includes('edit')"
                class="table_opr" 
                @click="detail(scope.row.groupId,scope.row.groupName,scope.row.leaderId)">
                {{$t('public.no51')}}
              </span>
              <span 
                v-if="$store.state.common.permiss.creditauditgroup.includes('del')"
                class="table_opr"
                @click="delBegin(scope.row.groupId,scope.row.groupName)">
                {{$t('idManage.del')}}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <el-row type="flex" justify="end">
      <div class="pages" >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          layout="sizes, prev, pager, next, total,->"
          :page-sizes="pagination.pageSizeOptions"
          :page-size="pagination.pageSize"
          @size-change="handleSizeChange"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-row>

    <div class="foot"></div>

    <!-- ------------------ 添加修改小组弹窗 -------------------- -->
    <el-dialog :title="$t('loanAfterOperation.add2')+'/'+$t('new.no22')" :visible.sync="addOrChange" width="600px">
      <el-form ref="addForm" :model="form" size="small" >
        <el-form-item :label="$t('new.no23')">
          <el-input type="text" style="width:216px" v-model="form.groupName"></el-input>
        </el-form-item>
        <el-form-item :label="$t('new.no19')">
          <el-select size="small" clearable  v-model="form.leaderId" :placeholder="$t('public.placeholder')">
            <el-option v-for="item in groupList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div class="search-input1 mb10">
          <span >{{$t('new.no29')}}:</span>
          <el-transfer 
            v-model="selectGroupList" 
            :data="groupList"
            @change="rightChange"
            :titles="[this.$t('new.no33'), this.$t('new.no32')]"
          ></el-transfer>
        </div>
        <!-- <el-form-item :label="$t('new.no12')">
          <el-checkbox-group v-model="form.stageSet">
            <el-checkbox v-for="value in collectionType" :key="value.stage" :label="value.stage" ></el-checkbox>
          </el-checkbox-group>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyClose">{{$t('public.no50')}}</el-button>
        <el-button type="primary" @click="modifySubmit">{{$t('public.no49')}}</el-button>
      </div>
    </el-dialog>

    <!-- ------------------ 删除小组弹窗 -------------------- -->
    <el-dialog title="" :visible.sync="delFlag" width="500px">
      <div style="height:40px;">{{$t('merchantList.no56') + ' ' + delName}} ?</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="delFlag = false">{{$t('public.no50')}}</el-button>
        <el-button type="primary" @click="delSure">{{$t('public.no49')}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
export default {
  name: 'collectionGroup',
  data () {
    const searchData=[
      {
        type: 'input',
        label: 'new.no24',
        attr: 'groupId',
        value: ''
      },{
        type: 'select',
        label: 'new.no21',
        attr: 'leaderId',
        option: [],
        value: '',
        langFlag: false,
      },{
        type: 'rangePicker',
        label: 'new.no28',
        attr: 'createTime',
        value: [],
      }
    ]
    return {
      sessionid: '',
      pageTotal: 0, // 分页总数
      loadFlag: true,
      formInline: { },
      searchData:searchData,
      pagination: {
        pageSize: global.config.pageSize,
        pageSizeOptions: global.config.pageSizeOptions,
        current: 1,
        total: 0,
      },
      leaderList: [], // 查询栏组长列表
      form: {
        groupName: '',
        leaderId: '',
        stageSet: []
      },
      tableData: [], // 列表信息数据模拟
      modifyFlag: false, // 修改点击开关
      addFlag: false, // 窗口点击开关
      addOrChange: false,
      groupList: [], // 穿梭框所有值
      selectGroupList: [], // 穿梭框右侧值
      collectionType: [], // 催收阶段
      changeFlag: false,
      delFlag: false,
      delId: '',
      delName:'',
      defProps:{
        key: 'groupMemberId',
        label: 'memberName',
      }
    }
  },
  methods: {
    handleSizeChange (val) {// 每页条数变化时操作
      this.pagination.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange (val) { // 分页按钮点击操作
      this.pagination.current = val;
      this.getTableData();
    },
    getTableData () {
      this.loadFlag = true;
      let option = {
        pageNum:this.pagination.current,
        pageSize:this.pagination.pageSize,
        param: {
          ...this.formInline,
          groupCategory: 2
        }       
      }
      this.$axios.post(this.$action.group_list, option).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.pagination.total = res.data.total;
        }else{
          this.$globalMsg.error(res.message)
        }
        this.loadFlag = false;
      })
    },
    search(search) { // 搜索
      this.formInline = {
        groupId: search.groupId,
        leaderId:search.leaderId,
        createTimeBegin: search.createTime?search.createTime[0]:'',
        createTimeEnd: search.createTime?search.createTime[1]:'',
        groupCategory: 2
      };
      this.pagination.current = 1;
      this.getTableData();
    },
    detail (groupId,groupName, leaderId) { // 点击修改操作
      this.form.groupName = groupName
      this.form.leaderId = leaderId
      this.groupId = groupId;
      this.getSelectGroup(leaderId)
      this.groupName_option();
      this.modifyFlag = true;
      this.addOrChange = true;
    },
    addGroup () { // 添加小组按钮操作
      this.form.groupName = ''
      this.form.leaderId = '';
      this.selectGroupList = [];
      this.groupName_option();
      this.addFlag = true;
      this.addOrChange = true;
    },
    modifySubmit () { // 确认添加修改操作
      let httpurl = this.$action.group_save
      if (this.form.groupName == '') {
        this.$globalMsg.error(this.$t('new.no35'));
        return;
      }
      if (this.form.leaderId == '') {
        this.$globalMsg.error(this.$t('new.no36'));
        return;
      }
      let arr = []
      let hasSel = this.selectGroupList.filter(value=>value!=this.form.leaderId)
      
      hasSel.forEach(value=>{
        arr.push({groupLeader:2,memberId:value})
      })
      arr.push({groupLeader:1,memberId:this.form.leaderId})
      let option = {
        param:{
          groupName: this.form.groupName,
          // stageSet: this.form.stageSet.join(','),
          partnerId:sessionStorage.partnerId,
          groupType: 2,
          partnerGroupMemberDOList: arr
        }
      }
      if(this.modifyFlag){
        httpurl = this.$action.group_modification
        option.param.groupId = this.groupId
      }
      this.$axios.post(httpurl, option).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'));
          this.getTableData();
          this.leaderName_option();
        } else {
          this.$globalMsg.error(this.$t(res.message));
        }
        this.modifyClose();
        
      })
    },
    modifyClose () { // 添加修改关闭操作
      this.groupList = [];
      this.selectGroupList = [];
      this.modifyFlag = false;
      this.addFlag = false;
      this.addOrChange = false;
    },
    leaderName_option () { // 获取组长列表
      let option = {
        param:{
          groupCategory: 2
        }
      }
      this.$axios.post(this.$action.group_leader, option).then(res => {
        if (res.code == 200) {
          let arr = res.data
          arr.forEach(value => {
            value.value = value.groupMemberId
            value.label = value.memberName
          })
          this.leaderList = arr
          this.searchData.filter(value=>value.attr=='leaderId')[0].option = arr
        }
      })
    },
    groupName_option () { // 获取所有组员角色列表
      let option = {
        param:{
          roleCategory: 2
        }
      }
      this.$axios.post(this.$action.group_member, option).then(res => {
        if (res.code == 200) {
          let arr = res.data
          arr.forEach(value => {
            value.key = value.memberId
            value.value = value.memberId
            value.label = value.memberName
          })
          this.groupList = arr
        }
      })
    },
    getSelectGroup (id) { // 获取所有组员角色列表
      let option = {
        param:{
          memberId: id,
          groupCategory: 2
        }
      }
      this.$axios.post(this.$action.group_presence, option).then(res => {
        if (res.code == 200) {
          let arr = []
          res.data.forEach(value => {
            arr.push(value.memberId)
          })
          this.selectGroupList = arr
        }
      })
    },
    rightChange () {
      this.changeFlag = true;
    },
    getcollectionType(){ // 获取催收阶段
      let option = {
				param:{
					partnerId:sessionStorage.partnerId,
				}
      }
      this.$axios.post(this.$action.collection_pageinfo, option).then(res => {
        if (res.code == 200) {
					let collectionConfigList = res.data.processCollectionConfigDOList;
					if(collectionConfigList != null && collectionConfigList.length > 0){
						collectionConfigList.forEach((ccl) => {
							ccl.value = ccl.stage
							ccl.label = ccl.stage
						})
					}
					this.collectionType = collectionConfigList
				}
      })
    },
    delBegin(id,groupName) {
      this.delId = id;
      this.delName = groupName;
      this.delFlag = true;
    },
    delSure() {// 确认删除小组
      let option = {
        param: {
          groupId:this.delId,
        },
      }
      this.$axios.post(this.$action.group_delete, option).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'));
          this.getTableData();
        }else {
          this.$globalMsg.success(res.message);
        }
        this.delFlag = false;
      })
    }
  },
  mounted () {
    this.getTableData();
    this.leaderName_option();// 获取查询栏组长下拉框列表
    // this.getcollectionType();// 获取催收阶段
  }
}
</script>
<style scoped lang="scss">

</style>
